<script setup="">
import {onMounted, ref} from "vue"
import {Plus} from "@element-plus/icons-vue"
import NewOrEditBanner from "@/components/home/NewOrEditBanner.vue";
import BannerCard from "@/components/home/BannerCard.vue";
import {adminGetBanner} from "@/request/mid_interface.js";

defineProps({
  msg: {
    type: String,
    required: false,
  }
})

const newBannerVisible = ref(false)

onMounted(() => {
  getData()
})

const dataList = ref([])

async function getData() {
  const res = await adminGetBanner({})
  dataList.value = res.data
}

function closeAndRefresh() {
  newBannerVisible.value = false
  getData()
}

const limitBannerNum = ref(8)
</script>

<template>
  <el-dialog :destroy-on-close="true" :center="true" v-model="newBannerVisible" title="" width="800">
    <NewOrEditBanner @close="newBannerVisible=false" @refresh="closeAndRefresh"/>
  </el-dialog>
  <div class="grid grid-cols-3 gap-3 mt-4">
    <template v-for="item in dataList">
      <BannerCard @refresh="getData" :param="item"></BannerCard>
    </template>
  </div>
  <div class="flex items-center justify-center mt-10 mb-3 text-gray-400">
    <div>*最多可以上传{{limitBannerNum}}张轮播图</div>
  </div>
  <div v-if="dataList.length<limitBannerNum" class="flex items-center justify-center mt-2 mb-5">
    <div
        @click="newBannerVisible=true"
        class="flex items-center w-24 h-10 bg-white rounded-full justify-center cursor-pointer select-none hover:opacity-70">
      <el-icon color="var(--themeColor)">
        <Plus></Plus>
      </el-icon>
      <div class="ml-1 font-bold" style="color: var(--themeColor)">新增</div>
    </div>
  </div>
</template>

<style scoped>
</style>
